<template>
  <div class="guns-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="风格:">
              <a-input @keydown.enter="reload" v-model:value="where.style" allow-clear />
            </a-form-item>

            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <!-- <a-button @click="reset">重置</a-button> -->
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
    </div>

    <!-- 表格 -->
    <div>
      <a-card :bordered="false" class="table-height">
        <BasicTable
          :canResize="false"
          ref="tableRef"
          :api="TagStyleInfoApi.tree"
          :where="where"
          :columns="columns"
          :isTreeTable="true"
          showTableSetting
          :defaultExpandAllRows="true"
          rowKey="id"
          :rowSelection="{
            type: 'checkbox',
            selectedRowKeys: checkedKeys,
            onChange: onSelectChange,
          }"
          @register="registerTable"
        >
          <!-- table上边工具栏 -->
          <template #toolbar>
            <div class="table-toolbar">
              <a-space>
                <a-button type="primary" @click="openAdd()">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  <span>新建</span>
                </a-button>
                <a-button @click="expandAll">展开全部</a-button>
                <a-button @click="collapseAll">折叠全部</a-button>
                <!-- 
                <a-button danger @click="removeBatch()">
                  <template #icon>
                    <delete-outlined />
                  </template>
                  <span>删除</span>
                </a-button> -->
              </a-space>
            </div>
          </template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'style'">
              <a @click="openEdit(record)">{{ record.style }}</a>
            </template>

            <!-- table列表状态栏 -->
            <!-- Y：热门，N：不热门 -->
            <template v-if="column.key === 'hotFlag'">
              <a-switch
                checked-children="是"
                un-checked-children="否"
                default-checked
                :checked="record.hotFlag === 'Y'"
                @change="(checked) => editHotFlag(checked, record)"
              />
            </template>

            <!-- Y：新建，N：历史创建 -->
            <template v-if="column.key === 'newFlag'">
              <a-switch
                checked-children="是"
                un-checked-children="否"
                default-checked
                :checked="record.newFlag === 'Y'"
                @change="(checked) => editNewFlag(checked, record)"
              />
            </template>

            <!-- 图片预览 -->
            <template v-else-if="column.key === 'filePreview'">
              <a-image
                :width="30"
                :src="record.imageFileId"
                scale="0.5 0.5 1"
                :preview-options="previewOptions"
              />
            </template>

            <!-- table操作栏按钮 -->
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a @click="openEdit(record)">修改</a>
                <a-divider type="vertical" />
                <a-popconfirm
                  title="确定要删除此标签吗？"
                  @confirm="remove(record)"
                  v-if="record.parentNo !== '-1'"
                >
                  <a class="guns-text-danger">删除</a>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </a-card>
    </div>

    <!-- 新增弹窗 -->
    <tagStyleInfo-add
      v-model:visible="showAdd"
      @done="reload"
      :isUpdate="isUpdate"
      :data="current"
      :org-list="orgLists"
    />
  </div>
</template>

<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive, ref, createVNode } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import TagStyleInfoAdd from './tagStyleInfo-add.vue';
import { TagStyleInfoApi } from '/@/api/touch/tagStyle/TagStyleInfoApi';
import { message, Modal } from 'ant-design-vue';

// 查询条件
const where = reactive({
  style: '',
});

const columns = ref<object[]>([
  {
    title: '风格',
    dataIndex: 'style',
    align: 'left',
  },
  // {
  //   title: '类型',
  //   dataIndex: 'type',
  //   customRender: function ({ text }) {
  //     if ('1' === text) {
  //       return '标签';
  //     } else {
  //       return '画风';
  //     }
  //   },
  // },
  {
    title: '图片预览',
    key: 'filePreview',
    dataIndex: 'imageFileId',
  },
  // {
  //   title: '新旧',
  //   dataIndex: 'newFlag',
  // },
  // {
  //   title: '热门',
  //   dataIndex: 'hotFlag',
  // },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    key: 'action',
    width: 280,
    align: 'center',
  },
]);

const previewOptions = ref({
  // 设置图片预览时的样式，包括宽度和高度
  style: {
    width: '800px', // 预览时的宽度
    height: '600px', // 预览时的高度
  },
});

// 多选选中列表
const checkedKeys = ref<Array<string | number>>([]);

// 当前行数据
const current = ref<any>(null);

// 是否显示新增弹框
const showAdd = ref<boolean>(false);
const isUpdate = ref<boolean>(false);

// 是否显示新增编辑弹框
const showEdit = ref<boolean>(false);

// ref
const tableRef = ref(null);

/**
 * 点击查询
 * @author: nxy
 * @Date: 2022-10-12 09:38:18
 */
const reload = () => {
  checkedKeys.value = [];
  tableRef.value.reload({ page: 1 });
};

/**
 * 点击重置
 * @author: nxy
 * @Date: 2022-10-12 09:38:29
 */
const reset = () => {
  where.style = '';
  reload();
};
const orgLists = ref<any>([]);
onMounted(async () => {
  orgLists.value = await TagStyleInfoApi.tree();
});

// 表格选中改变
const onSelectChange = (selectedRowKeys: (string | number)[]) => {
  checkedKeys.value = selectedRowKeys;
};

/**
 * 打开新增弹窗
 *
 * @author yxx
 * @date 2022/04/04 12:24
 */
const openAdd = () => {
  showAdd.value = true;
  isUpdate.value = false;
  current.value = {};
};

/**
 * 打开编辑弹窗
 *
 * @author fengshuonan
 * @date 2021/4/2 17:03
 */
const openEdit = (row) => {
  console.log('row', row);
  current.value = row;
  showAdd.value = true;
  isUpdate.value = true;
};
const [registerTable, { expandAll, collapseAll }] = useTable({
  afterFetch: (data) => {
    orgLists.value = data;
  },
});
/**
 * 修改热门状态
 *
 */
const editHotFlag = async (checked: boolean, row: any) => {
  const id = row.id;
  // 职位状态：1-启用，2-禁用
  const hotFlag = checked ? 'Y' : 'N';
  let result = await TagStyleInfoApi.updateStatus({ id, hotFlag });
  console.log(result);
  //message.success(result.message);
  reload();
};

/**
 * 修改热门状态
 *
 */
const editNewFlag = async (checked: boolean, row: any) => {
  const id = row.id;
  // 职位状态：1-启用，2-禁用
  const newFlag = checked ? 'Y' : 'N';
  let result = await TagStyleInfoApi.updateStatus({ id, newFlag });
  console.log(result);
  // message.success(result.message);
  reload();
};

/**
 * 批量删除
 *
 */
// const removeBatch = () => {
//   showEdit.value = false;
//   if (!checkedKeys.value.length) {
//     message.error('请至少选择一条数据');
//     return;
//   }
//   Modal.confirm({
//     title: '提示',
//     content: '确定要删除选中的职位吗?',
//     icon: createVNode(ExclamationCircleOutlined),
//     maskClosable: true,
//     onOk: async () => {
//       let params = checkedKeys.value;
//       const result = await TagStyleInfoApi.batchDel({ ids: params });
//       message.success(result.message);
//       reload();
//     },
//   });
// };

const remove = async (row: any) => {
  const result = await TagStyleInfoApi.delete({ id: row.id });
  message.success(result.message);
  reload();
};
</script>
<style scoped>
:deep(.ant-image-preview-img-wrapper .ant-image-preview-img img) {
  max-width: 400px !important;
  max-height: 400px !important;
}
</style>

